<template>
  <section>
    <!--工具条：高级查询-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="keyword" placeholder="请输入关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="keywordQuery">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" disabled>新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <!--
      :data="permissions" - 列表数据
      highlight-current-row v-loading="listLoading" - 当前行高亮
      v-loading="listLoading" - 记载框
    -->
    <el-table :data="permissions" highlight-current-row v-loading="listLoading"
              style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="name" label="名称" width="140">
      </el-table-column>
      <el-table-column prop="url" label="路径" width="280">
      </el-table-column>
      <el-table-column prop="sn" label="方法" width="200">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" disabled>编辑</el-button>
          <el-button type="danger" size="small" disabled>删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条：分页栏-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger"   disabled>批量删除</el-button>
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange"
                     :page-size="pageSize" :total="totals" :current-page="currentPage" style="float:right;">
      </el-pagination>
    </el-col>

  </section>
</template>

<script>
export default {
  data() {
    return {
      //1.分页查询的相关参数
      permissions: [],  //列表数据
      pageSize: 5,      //每页显示的条数
      currentPage: 1,   //当前页
      totals: 0,        //总数量
      listLoading: false, //加载框

      //2.高级查询的相关参数
      keyword: '',

    }
  },
  methods: {
    //1.获取权限列表
    getMenus() {
      let para = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.keyword
      };
      this.listLoading = true; //显示加载框
      this.$http.post("/permission", para).then(res => {
        this.permissions = res.data.data;//给数组赋值 - 显示列表数据
        this.totals = res.data.totals;  //给总数量赋值 - 计算分页栏
        this.listLoading = false;//关闭加载框
      }).catch(res => {
        this.$message.error("系统繁忙，请稍后重试!!!");
      })
    },

    //2.点击分页实现
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getMenus();
    },

    //3.高级查询 = 关键字查询
    keywordQuery() {
      //防止当前页不在第一页的时候 通过关键字查询出现 当前页没有数据的情况
      this.currentPage = 1;
      this.getMenus();
    }

  },
  mounted() {
    this.getMenus();
  }
}

</script>

<style scoped>

</style>